<template>
	<view>
		<scroll-view scroll-y="" :show-scrollbar="false" class="scroll">
			<!-- 轮播图 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item, index in swiperImage" :key="index">
					<image :src="item" mode="" style="width:94vw;height: 100%;">
					</image>
				</swiper-item>
			</swiper>
			<!-- 金刚区 -->
			<view class="gang">
				<view class="gang-item" @click="toTabel">
					<image src="/static/gang/ec151c4263f2c23490c8bd484b41d2d.png" mode="" class="gang-img"></image>
					<text class="gang-txt">设备情况</text>
				</view>
				<view class="gang-item" @click="toWarning">
					<image src="/static/gang/fc3cd0d920d8134d883ff2503f34812.png" mode="" class="gang-img"></image>
					<text class="gang-txt">预警信息</text>
				</view>
				<view class="gang-item">
					<image src="/static/gang/29a42baac9be163e1f512de2ea3bb13.png" mode="" class="gang-img"></image>
					<text class="gang-txt" @click="toWaterAnalysis">用水分析</text>
				</view>
				<view class="gang-item" @click="toMap">
					<image src="/static/gang/3e14229c86cdc3ec4c6cde0e1017161.png" mode="" class="gang-img"></image>
					<text class="gang-txt">地图显示</text>
				</view>
			</view>
			<!-- 设备管理，报警管理 -->
			<!-- <view class="buts">
				<button class="device" type="primary">设备管理</button>
				<button class="alarm" type="warn">报警管理</button>
			</view> -->
			<!-- 报警记录 -->
			<view class="alertLogs">
				<uni-section class="mb-10" title="报警记录" type="line"></uni-section>
				<view class="alertoptsLinecharts">
					<qiun-data-charts type="line" :opts="alertopts" :chartData="alertData" />
				</view>
			</view>
			<!-- 灌溉亩数 -->
			<view class="alertLogs">
				<uni-section class="mb-10" title="灌溉面积" type="line"></uni-section>
				<view class="acreageoptsColumncharts">
					<qiun-data-charts type="column" :opts="acreageopts" :chartData="acreageData" :ontouch="true"
						disableScroll />
				</view>
			</view>
			<!-- 水井数量 -->
			<view class="alertLogs">
				<uni-section class="mb-10" title="设备数量" type="line"></uni-section>
				<view class="wellNumoptBarcharts">
					<qiun-data-charts type="area" :opts="wellNumopts" :ontouch="true" :chartData="wellNumData" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import {
	ref
} from "vue"
import { alertDataApi, acreageDataApi, deviceDataApi } from "@/axios/pageApi/home"
import {
	onReady
} from "@dcloudio/uni-app"
// 报警记录折线图
let alertData = ref({})
let swiperImage = ref([])
// 灌溉亩数
let acreageData = ref({})
// 水井数量
let wellNumData = ref({})
// 报警记录者折线图配置
let alertopts = ref({
	color: ["#dd1e1e"],
	padding: [15, 10, 0, 15],
	dataLabel: true,
	dataPointShape: true,
	enableScroll: false,
	legend: {},
	xAxis: {
		disableGrid: true
	},
	yAxis: {
		gridType: "dash",
		format: "xAxisConfig1",
		dashLength: 2,
		data: [
			{
				min: 0,
				max: 150
			}
		]
	},
	extra: {
		line: {
			type: "curve",
			width: 2,
			activeType: "hollow",
			linearType: "custom",
			onShadow: true,
			animation: "horizontal"
		}
	}
})
// 灌溉亩数柱状图配置
let acreageopts = ref({
	// rotate: false,
	// rotateLock: false,
	enableScroll: true,
	touchMoveLimit: 100,
	enableMarkLine: true,
	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
	padding: [15, 15, 0, 5],
	legend: {},
	xAxis: {
		disableGrid: true,
		itemCount: 3,
		scrollShow: true,
		scrollBackgroundColor: "#fff",
		scrollColor: "#eee",
		format: "xAxisConfig1",
	},
	yAxis: {
		gridType: "dash",
		dashLength: 2,
		padding: 100,
		format: "yAxisDemo4",
	},
	extra: {
		area: {
			type: "curve",
			opacity: 0.2,
			addLine: true,
			width: 2,
			gradient: true,
			activeType: "hollow"
		},
	}
})
// 水井数量条状图配置
let wellNumopts = ref({
	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
	padding: [15, 15, 0, 15],
	enableScroll: true,
	touchMoveLimit: 60,
	legend: {},
	xAxis: {
		scrollShow: true,
		disableGrid: true,
		format: "xAxisConfig1",
		itemCount: 3,
		scrollAlign: "left"
	},
	yAxis: {
		gridType: "dash",
		dashLength: 2,

	},

	extra: {
		area: {
			type: "curve",
			opacity: 0.2,
			addLine: true,
			width: 2,
			gradient: true,
			activeType: "hollow"
		},
	}
})
onReady(() => {
	// 报警折线图获取数据
	getalertData()
	// 灌溉亩数获取数据
	getacreageData()
	// 水井数量获取数据
	getwellNumData()
	for (let i = 1; i < 5; i++) {
		swiperImage.value.push(`http://test.yjzhcloud.com/swiper/${i}.png?t=${new Date().getTime()}`);
	}

})
// 跳转到搜索页
function toSearch() {
	uni.navigateTo({
		url: "/pages/searchPage/searchPage"
	})
}
// 获取报警折线图
async function getalertData() {
	const res = await alertDataApi()
	if (res.code == 0) {
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let alertDataChart = {
				categories: res.data.categories,
				series: res.data.series
			};
			alertData.value = JSON.parse(JSON.stringify(alertDataChart));
		}, 500);
	}


}
// 灌溉亩数柱状图
async function getacreageData() {
	const res = await acreageDataApi()
	setTimeout(() => {
		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		let acreageDatares = {
			categories: res.data.categories,
			series: res.data.series.map(item => {
				return {
					...item, format: "yAxisDemo4"
				}
			})
		};
		acreageData.value = JSON.parse(JSON.stringify(acreageDatares));
	}, 500);
}
// 水井数量柱状图
async function getwellNumData() {
	const res = await deviceDataApi()
	res.data.series[0].name = '终端数量'
	setTimeout(() => {
		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		let deviceres = {
			categories: res.data.categories,
			series: res.data.series,
		};
		wellNumData.value = JSON.parse(JSON.stringify(deviceres));
	},
		500);
}
// 去设备列表
function toTabel() {
	uni.navigateTo({
		url: "/pages/listPage/listPage"
	})
}
// 跳转地图
function toMap() {
	uni.switchTab({
		url: "/pages/mapPage/mapPage"
	})
}
//跳转报警信息
function toWarning() {
	uni.navigateTo({
		url: "/pages/warningPage/warningPage"
	})
}
// 跳转用水分析
function toWaterAnalysis() {
	uni.navigateTo({
		url: "/pages/waterAnalysisPage/waterAnalysisPage"
	})
}
</script>

<style lang="scss" scoped>
.search {
	box-sizing: border-box;
	width: 90vw;
	margin: 30rpx;
	border: 1px solid #ccc;
	border-radius: 20rpx;
	padding-left: 30rpx;
}

.scroll {
	box-sizing: border-box;
	width: 100vw;
	padding: 2vw;
	background-color: #eee;
}

.gang {
	width: 96vw;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: white;
	margin: 10px 0;
	padding: 10px 0;
	border-radius: 4px;
}

.gang-item {
	/* width: 20vw; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
}

.gang-img {
	width: 40px;
	height: 40px;
}

.gang-txt {
	font-size: 12PX;
}

.buts {
	width: 96vw;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.alertLogs {
	padding: 10px 0;

	.alertoptsLinecharts {
		padding-top: 30rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;
		background-color: #fff;
	}

	.acreageoptsColumncharts {
		padding-top: 30rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;
		background-color: #fff;
	}

	.wellNumoptBarcharts {
		padding-top: 30rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;
		background-color: #fff;
	}
}

.chart-title {

	text-align: center;
	font-size: 16px;
	margin: 0 auto;
}
</style>